<@override name="contest_content">
<table id="contest-statistics" class="table table-condensed table-bordered table-hover contest-statistics1">
  <thead>
  <tr>
    <th width="5%">ID</th>
    <#list resultName as name>
      <th id="${name}">${name}</th>
    </#list>
    <th width="10%">Total</th>
    <#list languageList as language>
      <th>${language.name}</th>
    </#list>
  </tr>
  </thead>
  <tbody>
    <#list statistics as st>
    <tr>
      <td class="text-center"><a href="contest/problem/${cid}-${st.id!}">${st.id!}</a></td>
      <#list resultName as name>
        <#assign val=st["${name}"]>
        <td>${val}</td>
      </#list>
      <td class="text-center"><a href="contest/status/${cid!}?pid=${st.id!}">${st.total!}</a></td>
      <#list languageList as language>
        <#assign val=st["${language.ext}"]>
        <td>${val}</td>
      </#list>
    </tr>
    </#list>
  </tbody>
</table>

<div id="container" style="min-width: 750px; min-height: 550px; margin: 0 auto" id="container1"></div>
</@override>

<@override name="scripts">
<script src="assets/Highcharts/js/highcharts.js"></script>
<script src="assets/Highcharts/js/modules/exporting.js"></script>

<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>

<script type="text/javascript">
  (function ($) { // encapsulate jQuery
    $(function () {
      $('#container').highcharts({
        chart: {
          type: 'column'
        },
        title: {
          text: '<a href="contest/show/${cid}">Contest Statistics ${cid}</a> -- PowerOJ'
        },
        xAxis: {
          categories: [<#list statistics as st>'${st.id}',</#list>]
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total Submit'
          }
        },
        legend: {
          backgroundColor: '#FFFFFF',
          reversed: true
        },
        plotOptions: {
          series: {
            stacking: 'normal'
          }
        },
        series: [
          <#list resultName as name>
            {
              name: '${name}',
              color: $('th#${name!}').css('color'),
              stack: 'result',
              data: [<#list statistics as st>${st["${name}"]}<#if st_index<statistics?size-1>,</#if></#list>]
            },
          </#list>
          <#list languageList as language>
            {
              name: '${language.name}',
              stack: 'language',
              data: [<#list statistics as st>${st["${language.ext}"]}<#if st_index<statistics?size-1>,</#if></#list>]
            }<#if language_index<languageList?size-1>,</#if>
          </#list>]
      });
    });
  })(jQuery);
</script>

<script type="text/javascript">
  $(document).ready(function () {
    <#if oj_style != "slate">
      $("#contest-statistics").tablecloth({
        theme: "stats",
        sortable: true,
        condensed: true,
        striped: true,
        clean: true
      });
    </#if>
  });
</script>
</@override>
<@extends name="_layout.html" />
